<template>
  <div class="aoto">
    <el-dialog
      title="二级分类"
      :visible.sync="fen_lei"
      width="85%">
      <div class="obgrectdataarr">
        <div class="guanli_class" v-for="item in parent_class">
          <el-button type="primary" @click="second(item)" plain>{{item.class_name}}</el-button>
        </div>
      </div>


    </el-dialog>

    <el-dialog
      title="操作"
      :visible.sync="dateadvertisement"
      width="30%">
      <span>是否删除商品：{{imgtext}}</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dateadvertisement = false">取 消</el-button>
    <el-button type="primary" @click="submitimg">确 定</el-button>
    </span>
    </el-dialog>
    <el-row class="header_top">
      <el-col :span="12" class="height_gao">
        <div class="grid-content bg-purple  height_gao">
          <el-input
            placeholder="请商品名称"
            prefix-icon="el-icon-search"
            v-model="salesman" class="input_">
          </el-input>
          <el-button type="primary" class="subang" @click="timeadd">确定</el-button>
        </div>
      </el-col>
      <el-col :span="12" class="height_gao">
        <div class="grid-content bg-purple-light height_gao">
        </div>
      </el-col>
    </el-row>
    <el-row class="header_toptow">
      <el-col :span="2" class="height_gao">
        <div class="grid-content bg-purple  height_gao">
          <el-button type="success" @click="bodyaudh(1)" plain>全 部</el-button>

        </div>
      </el-col>
      <el-col :span="22" class="height_gao">
        <div class="grid-content bg-purple-light height_gao">
          <div class="guanli_class" v-for="item in Seeclass">
            <el-button type="primary" @click="clkclass(item)" plain>{{item.class_name}}</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="autd animated slideInRight">
      <el-table :data="datatitle" border style="width: 100%" v-loading="loading2" element-loading-text="拼命加载中">
        <el-table-column prop="id" label="ID" width="80">
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="130">
          <template slot-scope="scope">
            <div class="goods_text">{{scope.row.goods_name}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="商品图片" width="200">
          <template slot-scope="scope">
            <img :src="urlimg+scope.row.thumbnail " class="img_"/>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="商品价格" width="140">
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="100">
        </el-table-column>
        <el-table-column prop="stock" label="库存" width="130">
        </el-table-column>
        <el-table-column prop="created_at" label="添加时间" width="180">
        </el-table-column>
        <el-table-column prop="link" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="deleteclass(scope.row,scope.$index)" type="danger" plain>删除</el-button>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="updategoods(scope.row)" type="text" size="small">修改商品</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="cur"
        :page-size="pagesize"
        :page-count="currentPage4"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>


    </div>
  </div>
</template>
<script>

  export default {
    components: {},
    data() {
      return {
        urlimg: this.$IMG,
        salesman: '',//业务员
        pagesize: this.$store.state.attribute.page, //每页条数
        total: 1, //总条数
        currentPage4: 1, //总页数
        cur: 1, //当前页数
        loading2: true,
        Temporary: [],  //总数据
        datatitle: [],  //当页数据
        value4: '',
        Seeclass: [],
        fenleiflag: 0,
        imgarr: {},
        imgtext: "",
        rowindex: '',
        dateadvertisement: false,
        fen_lei: false,
        parent_class: [],
      }
    },
    methods: {
      handleClick(e){

        this.$store.commit("addgoodsinfo", e);
        this.$router.push('./goodsinfo');
//        console.log(row);
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
//      export2Excel() {
//        var myDate = new Date();
//        let header = ['商品名称', '商品价格', '排序', '库存', '添加时间'];
//        let val = ['goods_name', 'price', 'sort', 'stock', 'created_at'];
//        this.$h.exportexcel(header, val, this.datatitle, '商品信息' + myDate.toLocaleString())
//      },
      updategoods(e){//修改商品
        this.$store.commit('Deposit', e);
        this.$store.commit('goodsflag', e.id);
        this.$router.push('./updateaddgoods');
      },
      handleCurrentChange(val) { //分页
        if (this.fenleiflag != 1) {
          this.bodyaudh(val)
        }
      },
      timeadd() {  //时间查询 selechgoods
        this.http.post({
          'api': 'selechgoods',
          'data': {
            'data': {
              "value": this.salesman,
              "type": "name",
            }
          },
        }).then((res) => {
          this.shuju(res.data);
          this.fenleiflag = 1;
        }, (err) => {
          if (err) {
            this.$h.Ed(err, this);
          }
        })
      },
      clkclass(e){//点击分类 查看商品
        this.fen_lei = true;
        this.parent_class = e.parent_class;


      },
      second(e){
//          console.log(e);
        this.fen_lei = false;
        this.http.post({
          'api': 'getgoodsunderclass',
          'data': {
            'data': {
              "limt": this.pagesize,
              "classid": e.id
            }
          },
        }).then((res) => {
          this.shuju(res.data);
          this.fenleiflag = 1;
        }, (err) => {
          if (err) {
            this.$h.Ed(err, this);
          }
        })

      },
      erjiclass(){ //渲染分类
        this.http.post({
          'api': 'getgoodsclass',
          'data': {
            'data': {
//              "level": 2,
            }
          }
        }).then((res) => {
//            console.log( res.data.data);
          if (res.data.status_code == 200) {
            this.Seeclass = res.data.data;
          }
        }, (err) => {
          if (err) {
            this.$h.Ed(err, this);
          }
        })
      },
      deleteclass(e, i){
        this.dateadvertisement = true;
        this.imgarr = e;
        this.imgtext = e.goods_name;
        this.rowindex = i;
      },
      submitimg(){
        this.datatitle.splice(this.rowindex, 1);
        this.http.post({
          'api': 'deletegoods',
          'data': {
            'data': {
              "goodsid": this.imgarr.id
            }
          }
        }).then((res) => {
          if (res.data.status_code == 200) {
//            console.log(res.data)
            this.$h.dataSuccess(res.data, this);

            this.dateadvertisement = false;
          }
        }, (err) => {
          if (err) {
            this.$h.Ed(err, this);
          }
        })
      },
      bodyaudh(e) {
        this.loading2 = true;
        this.http.post({
          'api': 'getGoods',
          'data': {
            'data': {
              "limt": this.pagesize,
            }
          },
          "page": e,
        }).then((res) => {
          this.shuju(res.data);
          this.fenleiflag = 0;
        }, (err) => {
          if (err) {
            this.$h.Ed(err, this);
          }
        })
      },

      shuju(data) {
        this.loading2 = false;
        this.total = data.total; //数据总的条数
        this.currentPage4 = data.last_page;
        this.datatitle = data.data;
      },
    },
    watch: {},
    computed: {
      //计算属性
    },
    mounted() {
      this.bodyaudh(1);
      this.erjiclass();
      //生命周期
    }
  }
</script>
<style scoped>
  .pic_css {
    height: 45%;
    width: 60%;
    margin-top: 15px;
  }

  .goods_text {
    width: 100%;
    height: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .autd {
    margin-top: 15px;
  }

  .guanli_class {
    /*width: 60px;*/
    height: 35px;
    float: left;
    margin-left: 9px;
    margin-top: 11px;

  }

  .obgrectdataarr {
    width: 100%;
    height: 500px;
  }

  .header_top {
    height: 80px;
    width: 100%;

  }

  .img_ {
    display: block;
    width: 53%;
    height: 37px;
    margin: auto;
  }

  .eltag_ {
    margin-left: 1%;
  }

  .allith2 {
    background: #090404;
    float: right;
    margin-top: 15px;
  }

  .height_gao {
    height: 100%;
  }

  .header_toptow {
    /*height: 40px;*/
    width: 100%;
  }

  .input_ {
    width: 60%;
    margin-top: 15px;
  }

  .subang {
    margin-left: 3%;
    margin-top: 15px;
    width: 15%;
  }


</style>
